import { Component, EventEmitter, OnInit } from '@angular/core';
import { QuestionModel } from '../model/question.model';

@Component({
  selector: 'app-question',
  templateUrl: './question.component.html',
  styleUrls: ['./question.component.scss']
})
export class QuestionComponent implements OnInit {
  question: QuestionModel;             // 问题数据，由问卷父组件传入
  backupQuestion: QuestionModel;       // 问题数据备份，用于取消编辑时恢复初始数据
  editable: boolean = false;           // 标记问题是否可编辑， 由问卷父组件传入
  isEditing: boolean = false;          // 标记当前问题是否出入编辑状态
  deleteQuestionRequest: EventEmitter<any> = new EventEmitter();      // 删除问题的自定义事件。 该事件最终传递给父组件。

  constructor() { }

  ngOnInit() {
    this.copyQuestion();
  }
  // 定义私有方法， 用作对象深拷贝
  private copy(source: QuestionModel): QuestionModel {
    return <QuestionModel>JSON.parse(JSON.stringify(source));
  }

  public copyQuestion() {
    this.backupQuestion = this.copy(this.question);
  }

  // 点击编辑按钮时，进入编辑状态
  onEdit() {
    this.isEditing = true;
  }
//点击保存按钮时， 保存并推出编辑状态
  onSave() {
    this.copyQuestion();
    this.isEditing = false;
  }
// 点击取消按钮时， 恢复问题编辑前的数据，同时推出编辑状态
  onCancel() {
    this.question = this.copy(this.backupQuestion);
    this.isEditing = false;
  }
  // 点击删除按钮时， 删除当前问题，该操作通过自定义事件传递到问卷父组件中执行
  onDelete() {
    this.deleteQuestionRequest.emit(this.question);
  }
}
